<!--
 * @Author: shawnxiao
 * @Date: 2021-10-22 17:28:37
 * @LastEditTime: 2021-10-25 16:43:03
 * @FilePath: /gatt/src/modules/front/pages/GattDrag/index.vue
-->
<template>
  <div class="chart">
    <div class="header">
      <div class="header-left">
        <el-button type="primary" size="mini" @click="handlerAddGantt"
          >新建</el-button
        >
        <el-button type="primary" size="mini" @click="handlerSaveData"
          >保存</el-button
        >
        <el-button type="primary" size="mini" @click="handlerCheckList"
          >批量添加数据</el-button
        >
      </div>
    </div>
    <!--左边 -->
    <div
      class="chart-left"
      :style="{ width: rightLineX + 'px' }">
      <!-- 分割线 -->
      <div
        class="chart-left-rightLine"
        :style="{ left: rightLineX + 'px' }"
        ref="rightLine"
        @mousedown="rightLineMousedown"
      ></div>
    </div>
    <!-- 右边 -->
    <div
      class="chart-right"
      :style="{ left: rightLineX + 2 + 'px' }">
        <gatt-date
        ref="gattDate"
        :rightLineX="rightLineX">
        </gatt-date>
    </div>
  </div>
</template>

<script>
import GattDate from './components/GattDate'
export default {
  name: 'GattDrag',
  components: {
    GattDate
  },
  mounted () {
    this.init()
  },
  data () {
    return {
      // table滚动高度
      tableScrollTop: 0,
      // BG滚动高度
      BGScrollTop: 0,
      // leftMenu的右侧伸缩线
      rightLineX: 300,
      // 整体开始时间
      startTime: 1546617600000,
      // 整体结束时间
      endTime: 1548259200000,
      list: [],
      data: {
        list: [
          {
            // 名称
            name: 'father0',
            // 负责人
            ower: 'shawn',
            // 进度
            per: 48,
            // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
            type: '3',
            // 计划周期
            planTime: ['2019/01/05', '2019/01/24'],
            stoneTime: '',
            startTime: '2019/01/05',
            endTime: '2019/01/24',
            id: '0-1-0',
            // 展开与否
            expand: true,
            // 显示与否
            isShow: true,
            // 后置依赖-依赖的子任务id数组集
            depends: [],
            // 后置依赖-依赖于谁(id)子任务的父级任务id
            dependPid: '',
            // 前置依赖-子集
            requireChild: [],
            // 前置依赖 父集id
            requireId: '',
            // 父级id
            parentId: ''
          },
          {
            name: 'child1',
            ower: 'xiao',
            per: 30,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/05',
            endTime: '2019/01/12',
            id: '0-1-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [{ id: '0-1-2' }, { id: '0-1-3' }],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          },
          {
            name: 'child2',
            ower: 'dav',
            per: 40,
            type: '3',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/07',
            endTime: '2019/01/24',
            id: '0-1-4',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          },
          {
            name: 'child2-1',
            ower: 'lili',
            per: 40,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/07',
            endTime: '2019/01/15',
            id: '0-1-4-0',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            requireChild: [{ id: '0-1-4-1' }, { id: '0-1-4-2' }],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-4'
          },
          {
            name: 'child2-2',
            ower: 'lili',
            per: 40,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/16',
            endTime: '2019/01/24',
            id: '0-1-4-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            // 前置依赖的id
            requireId: '0-1-4-0',
            parentId: '0-1-4'
          },
          {
            name: 'child2-3',
            ower: 'lili',
            per: 40,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/16',
            endTime: '2019/01/24',
            id: '0-1-4-2',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            // requireChild: [{
            //   id: '0-1-4-3',
            //   // 任务结束日期提前多少天开始依赖任务（可选）默认任务结束依赖项就开始
            //   advanceDays: 2
            // }],
            // 前置依赖的id
            requireId: '0-1-4-0',
            parentId: '0-1-4'
          },
          // {
          //   name: 'child2-4',
          //   ower: 'lili4',
          //   per: 40,
          //   type: '2',
          //   planTime: [],
          //   stoneTime: '',
          //   startTime: '2019/01/23',
          //   endTime: '2019/02/24',
          //   id: '0-1-4-3',
          //   expand: true,
          //   isShow: true,
          //   // 目标连线id数组集
          //   depends: [],
          //   // 依赖于谁(id)
          //   dependPid: '',
          //   // 前置依赖的id
          //   requireId: '0-1-4-2',
          //   parentId: '0-1-4'
          // },
          {
            name: 'child3',
            ower: 'jeke',
            per: 50,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/06',
            endTime: '2019/01/14',
            id: '0-1-2',
            expand: true,
            isShow: true,
            // 依赖id数组集
            depends: [],
            // 指向谁(id)
            dependPid: '0-1-1',
            parentId: '0-1-0'
          },
          {
            name: 'child4',
            ower: '',
            per: 70,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/14',
            endTime: '2019/01/21',
            id: '0-1-3',
            expand: true,
            isShow: true,
            depends: [],
            dependPid: '0-1-1',
            parentId: '0-1-0'
          },
          {
            name: 'father2',
            ower: '',
            per: 70,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/02',
            endTime: '2019/01/10',
            id: '0-2-0',
            expand: true,
            isShow: true,
            depends: [],
            dependPid: '',
            parentId: ''
          }
        ],
        // 字段属性
        fieldsAttr: {
          name: {
            label: '名称',
            showTable: true, // 是否于表格中显示该字段所在列
            showToast: true, // 是否于浮窗内显示该字段
            width: '150px', // 可选
            resizable: true // 可选
          },
          ower: { label: '负责人', showTable: true, showToast: false },
          per: {
            label: '进度',
            showTable: true,
            showToast: true,
            // 设置进度阶段的颜色(可选)
            processColors: [
              { 10: '#be2e55', 20: '#409eff', 50: '#13587e', 100: '#3eb88d' }
            ],
            // 连线选项背景色(可选)
            bgcolor: '#e4e7ed'
          },
          type: { label: '类型', showTable: false, showToast: false },
          startTime: { label: '开始时间', showTable: false, showToast: true },
          endTime: { label: '结束时间', showTable: false, showToast: true }
        }
      }
    }
  },
  methods: {
    init () {
      this.formatList(this.data.list)
      this.$nextTick(() => {
        // this.$refs.gattTabble.init(this.list, this.data.fieldsAttr)
        this.$refs.gattDate.init(this.list, this.data.fieldsAttr)
      })
    },
    // 依据时间计算left，width top设置list
    formatList (arr) {
      arr.forEach((item, index) => {
        const obj = {}
        let startLeft = 0; let endLeft = 0
        if (item.startTime) {
          // 依据开始时间设置left
          startLeft = this.computedLeft(item.startTime)
          obj.left = startLeft
        }
        if (item.endTime) {
          // 依据结束时间设置width
          const y = new Date(item.endTime).getFullYear()
          let m = new Date(item.endTime).getMonth() + 1
          let d = new Date(item.endTime).getDate()
          m = m >= 10 ? m : `0${m}`
          d = d >= 10 ? d : `0${d}`
          endLeft = this.computedLeft(`${y}/${m}/${d}`)
          obj.widthMe = endLeft - startLeft
          obj.widthChild = endLeft - startLeft
        }
        // 依据索引设置top
        const topStep = 40
        obj.top = topStep * index + 12
        this.list.push(Object.assign(obj, item))
      })
    },
    //  左边宽度设置
    rightLineMousedown (e) {
      const cx = e.clientX
      let result
      document.onmousemove = event => {
        result = event.clientX - cx
        if (cx + result <= 300) return
        this.$refs.rightLine.style.left = cx + result + 'px'
      }
      document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
        if (cx + result <= 300) {
          this.rightLineX = 300
          return
        }
        this.rightLineX = cx + result
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.chart{
  height: 100%;
  position: relative;
  user-select: none;
  .header{
    height: 40px;
    position: relative;
    &-left{
      margin-left: 10px;
      box-sizing: border-box;
      padding-top: 5px;
      height: 40px;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #fff;
    }
  }
  &-left{
    position: fixed;
    top: 40px;
    left: 0;
    height: calc(100% - 40px);
    background-color: #fff;
    z-index: 999;
    &-rightLine{
      z-index: 999;
      position: absolute;
      top: 0;
      height: 100%;
      width: 2px;
      background-color: #d7d7d7;
      box-shadow: 4px 2px 12px 0 rgba(0,0,0,.2);
      cursor: col-resize;
      &:hover{
        background-color: #409eff;
      }
    }
  }
  &-right{
    display: flex;
    height: calc(100% - 40px);
    position: relative;
  }
}
</style>
